<template>
	<div>
		<el-card>
			<el-table :data="skuList" border stripe>
				<el-table-column label="序号" type="index" align="center" width="80" />
				<el-table-column label="名称" prop="skuName" align="center" />
				<el-table-column label="描述" align="center" prop="skuDesc" />
				<el-table-column label="默认图片" align="center">
					<!-- 插槽 -->
					<template v-slot="{ row }">
						<el-image
							:src="row.skuDefaultImg"
							style="width: 100px; height: 80px"
							:lazy="true"
						/>
					</template>
				</el-table-column>
				<el-table-column label="重量" prop="weight" align="center" />
				<el-table-column align="center" label="价格" prop="price" />
				<el-table-column label="操作" width="250" align="center">
					<template v-slot="{ row, $index }">
						<el-button
							plain
							icon="ele-Top"
							v-if="row.isSale === 0"
							@click="onSale(row.id)"
						>
							上架</el-button
						>

						<el-button
							type="info"
							size="small"
							title="下架"
							@click="cancel(row.id)"
							icon="ele-Bottom"
							v-else
							>下架</el-button
						>
						<el-button
							type="info"
							size="small"
							title="修改sku"
							plain
							circle
							@click="edit"
							icon="ele-Edit"
						></el-button>
						<el-button
							type="info"
							size="small"
							title="查看sku详情"
							plain
							circle
							@click="showDetail(row.id)"
							icon="ele-InfoFilled"
						></el-button>
						<el-button
							type="info"
							size="small"
							title="删除sku"
							plain
							circle
							@click="deleteSku(row.id)"
							icon="ele-Delete"
						></el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				v-model:currentPage="page"
				v-model:page-size="limit"
				:total="total"
				:pager-count="7"
				:page-sizes="[3, 5, 8, 10]"
				layout="total,sizes, prev, pager, next,  jumper"
			/>

			<el-drawer
				v-model="drawer"
				size="50%"
				:with-header="false"
				@close="closeDrawer"
			>
				<el-row>
					<el-col :span="6">名称</el-col>
					<el-col :span="18">{{ skuInfo.skuName }}</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">描述</el-col>
					<el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">价格</el-col>
					<el-col :span="18">{{ skuInfo.price }}</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">平台属性</el-col>
					<el-col :span="18">
						<el-tag v-for="item in skuInfo.skuAttrValueList" :key="item.id">
							{{ item.attrName }}-{{ item.valueName }}
						</el-tag>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">销售属性</el-col>
					<el-col :span="18">
						<el-tag v-for="item in skuInfo.skuSaleAttrValueList" :key="item.id">
							{{ item.saleAttrName }}-{{ item.saleAttrValueName }}
						</el-tag>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">商品图片</el-col>
					<el-col :span="18">
						<el-carousel trigger="click" height="200px" indicator-position="outside">
							<el-carousel-item
								justify="center"
								v-for="item in skuInfo.skuImageList"
								:key="item.id"
							>
								<img :src="item.imgUrl" justify="center" height="180" />
							</el-carousel-item>
						</el-carousel>
					</el-col>
				</el-row>
			</el-drawer>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import {
	reqByskuId,
	reqCancelSale,
	reqDeleteSale,
	reqOnSale,
	reqSkuList,
	type SkuInfoItemType,
	type SkuInfoListType,
} from "@/api/sku";
import { ElMessage } from "element-plus";
import { onMounted, ref, toRefs, watch } from "vue";

// skuList 列表
const skuList = ref<SkuInfoListType>([]);

// 页码逻辑
// 页码类型
interface pageDateType {
	page: number;
	limit: number;
	total: number;
}

// 页码的数据
const pageDate = ref<pageDateType>({
	page: 1,
	limit: 5,
	total: 100,
});
// 把page limit  total结构出来
const { page, limit, total } = toRefs(pageDate.value);

// 封装获取sku列表的方法
const getSkuList = async () => {
	try {
		const res = await reqSkuList(page.value, limit.value);
		skuList.value = res.records;
		total.value = res.total;
	} catch (error) {
		ElMessage.error("获取sku失败");
	}
};

// 初始化 获取sku列表
onMounted(() => {
	getSkuList();
});

// 监听 页码的改变  页码改变 重新发送请求
watch([page, limit], () => {
	getSkuList();
});

// 上架方法
const onSale = async (skuId: number) => {
	try {
		await reqOnSale(skuId);
		ElMessage.success("上架成功");
		getSkuList();
	} catch (error) {
		ElMessage.error("上架失败");
	}
};

// 下架方法
const cancel = async (skuId: number) => {
	try {
		await reqCancelSale(skuId);
		getSkuList();
		ElMessage.success("下架成功");
	} catch (error) {
		// ElMessage.error("下架失败");
	}
};

// 修改方法
const edit = () => {
	ElMessage.info("没有接口 我也很想做");
};

// 删除方法
const deleteSku = async (skuId: number) => {
	try {
		await reqDeleteSale(skuId);
		getSkuList();
		ElMessage.success("删除");
	} catch (error) {
		ElMessage.error("删除失败");
	}
};

// 详情框 是否显示
const drawer = ref(false);

// 查看sku的详细信息
const skuInfo = ref<SkuInfoItemType>({
	price: 0,
	skuName: "",
	skuDesc: "",
	weight: "",
	tmId: 0,
	category3Id: 0,
	skuDefaultImg: "",
	skuImageList: [],
	skuAttrValueList: [],
	skuSaleAttrValueList: [],
});

const showDetail = async (skuId: number) => {
	try {
		drawer.value = true;
		const res = await reqByskuId(skuId);
		skuInfo.value = res;
	} catch (error) {
		ElMessage.error("查询失败");
		drawer.value = false;
	}
};

// 清空
const closeDrawer = () => {
	skuInfo.value = {
		price: 0,
		skuName: "",
		skuDesc: "",
		weight: "",
		tmId: 0,
		category3Id: 0,
		skuDefaultImg: "",
		skuImageList: [],
		skuAttrValueList: [],
		skuSaleAttrValueList: [],
	};
};

// 收集  弹出详情框
</script>
<style scoped lang="scss">
.el-row {
  height: 40px;
}
.el-col {
  font-weight: bold;
}

.el-pagination{
	margin-top: 10px;
	justify-content: center;
}




.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}


</style>
